<template>
	<view class="content">
		<cu-custom class="navBox" bgColor="bg-gradual-red" :isBack="true">
			<block slot="content">海报生成</block>
		</cu-custom>
		
		<!-- 生成海报 -->
		
		
	<!-- 	<button class="blueBtn cu-btn bg-red shadow lg" @tap="shareFc()">生成海报</button> -->
		<!-- 图片展示由自己实现 -->
		<view style="display: none;" class="flex_row_c_c modalView" :class="qrShow?'show':''" @tap="hideQr()">
			<view class="flex_column">
				<view class="backgroundColor-white padding1vh border_radius_10px">
					<image :src="poster.finalPath || ''" mode="widthFix" class="posterImage"></image>
				</view>
				<!-- <view class="flex_row marginTop2vh">
					<button style="background: red; color: #FFFFFF;" type="default" size="mini" @tap.prevent.stop="saveImage()">保存图片</button>
				</view> -->
			</view>
		</view>
		<!-- 画布 -->
		<view class="hideCanvasView">
			<canvas class="hideCanvas" canvas-id="default_PosterCanvasId1" :style="{width: (poster.width||10) + 'px', height: (poster.height||10) + 'px'}"></canvas>
		</view>
		
		<view  @longpress="logoTime" class="backgroundColor-white padding1vh border_radius_10px">
			<image :src="poster.finalPath || ''" mode="widthFix" class="posterImage"></image>
		</view>
		
	</view>
</template>

<script>
	import _app from '@/components/QS-SharePoster/app.js';
	import {
		getSharePoster
	} from '@/components/QS-SharePoster/QS-SharePoster.js';
	import store from "@/store/index.js"   
	export default {
		data() {
			return {
				poster: {},
				qrShow: false,
				canvasId: 'default_PosterCanvasId1',
				inviteCode: ''
			}
		},
		onLoad() {
			this.inviteCode = store.state.app.userInfo.inviteCode 
		   this.shareFc()
			setTimeout(function(){
				this.shareFc()
			},2000)
			
			let aa = this.$config.invite_url+"?inviteCode="+this.inviteCode+"&type=1&params"
			
			console.log("pppp1q***************************")
			console.log(aa)
		},
		mounted() {
		
		},
		methods: {
			 logoTime(){
				 let that = this 
				uni.showModal({
				    title: '提示',
				    content: '是否需要下载海报？',
				    success: function (res) {
				        if (res.confirm) {
				          that.saveImage()  
				          
				        } else if (res.cancel) { 
				        } 
				     } 
				});
			 
			 },
			
			async shareFc() {
				const divNum = '';
				try {
					_app.log('准备生成:' + new Date())
					const d = await getSharePoster({
						_this: this, //若在组件中使用 必传
						type: 'testShareType',
						formData: {
							//访问接口获取背景图携带自定义数据

						},
						backgroundImage:'https://m.lbtai.com/pos.png',
						posterCanvasId: this.canvasId,	//canvasId
						delayTimeScale: 20, //延时系数
						/* background: {
							width: 1080,
							height: 1920,
							backgroundColor: '#666'
						}, */
						drawArray: ({
							bgObj,
							type,
							bgScale
						}) => {
							const dx = bgObj.width * 0.3;
							const fontSize = bgObj.width * 0.045;
							const lineHeight = bgObj.height * 0.04;
							//可直接return数组，也可以return一个promise对象, 但最终resolve一个数组, 这样就可以方便实现后台可控绘制海报
							return new Promise((rs, rj) => {
								rs([
									{
										type: 'custom',
										setDraw(Context) {
											Context.setFillStyle('black');
											Context.setGlobalAlpha(0.3);
											Context.fillRect(0, bgObj.height - bgObj.height * 0.2, bgObj.width, bgObj.height * 0.2);
											Context.setGlobalAlpha(1);
										}
									}, 
									{
										type: 'text',
										text: divNum,
										size: fontSize,
										color: 'white',
										lineFeed: 1,
										alpha: 1,
										textAlign: 'left',
										textBaseline: 'top',
										infoCallBack(textLength) {
											return {
												dx: 15,
												dy: 15
											}
										}
									}, 
									{
										type: 'qrcode',
										text: this.$config.invite_url+"#/pages/scanCodePages/register/index?inviteCode="+this.inviteCode+"&type=1&params",
										size: bgObj.width * 0.32,
										// dx: bgObj.width*0.05,
										// dy: bgObj.height - bgObj.width*0.25
										dx: bgObj.width*0.59,
										dy: bgObj.height - bgObj.width*0.62
									}
								]);
							})
						},
						setCanvasWH: ({
							bgObj,
							type,
							bgScale
						}) => { // 为动态设置画布宽高的方法，
							this.poster = bgObj;
						}
					});
					_app.log('海报生成成功, 时间:' + new Date() + '， 临时路径: ' + d.poster.tempFilePath)
					this.poster.finalPath = d.poster.tempFilePath;
					this.qrShow = true;
				} catch (e) {
					_app.hideLoading();
					_app.showToast(JSON.stringify(e));
					console.log(JSON.stringify(e));
				}
			},
			saveImage() {
				// #ifndef H5
				uni.saveImageToPhotosAlbum({
					filePath: this.poster.finalPath,
					success(res) {
						_app.showToast('保存成功,可在相册查看');
					}
				})
				// #endif
				// #ifdef H5
				// let oA = document.createElement("a");
				// 	oA.download = '海报'; // 设置下载的文件名，默认是'下载'
				// 	oA.href = this.poster.finalPath;
				// 	document.body.appendChild(oA);
				// 	oA.click();
				// 	oA.remove(); // 下载之后把创建的元素删除

				//_app.showToast('保存了');
				// #endif
			},
			hideQr() {
				this.qrShow = false;
			}
		}
	}
</script>

<style>
	.hideCanvasView {
		position: relative;
	}

	.hideCanvas {
		position: fixed;
		top: -99999upx;
		left: -99999upx;
		z-index: -99999;
	}

	.flex_row_c_c {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}

	.modalView {
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		opacity: 0;
		outline: 0;
		transform: scale(1.2);
		perspective: 2500upx;
		background: rgba(0, 0, 0, 0.6);
		transition: all .3s ease-in-out;
		pointer-events: none;
		backface-visibility: hidden;
		z-index: 999;
	}

	.modalView.show {
		opacity: 1;
		transform: scale(1);
		pointer-events: auto;
	}

	.flex_column {
		display: flex;
		flex-direction: column;
	}

	.backgroundColor-white {
	/* 	background-color: white; */
	}

	.border_radius_10px {
		/* border-radius: 10px; */
	}

	.padding1vh {
		padding: 1vh;
	}

	.posterImage {
		/* width: 60vw; */
		width: 100%;
		height: 100%;
	}

	.flex_row {
		display: flex;
		flex-direction: row;
	}

	.marginTop2vh {
		margin-top: 2vh;
	}
	.blueBtn{
		width: 500rpx;
		margin: 50rpx auto;
		display: block;
		/* line-height: 80rpx; */
		line-height: 80rpx;
	}
</style>
